<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en"> <!--<![endif]-->

<head>

    <!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>ChinaZ</title>
	<meta name="description" content="">
	<meta name="author" content="">
	
    <!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- CSS
  ================================================== -->
  	<link rel="stylesheet" href="css/zerogrid.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/slide.css">
	<link rel="stylesheet" href="css/menu.css">
	<!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
         <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
      </div>
    <![endif]-->
    <!--[if lt IE 9]>
		<script src="js/html5.js"></script>
		<script src="js/css3-mediaqueries.js"></script>
	<![endif]-->
    
</head>
<body>
<div class="wrap-body">
	<!--////////////////////////////////////Header-->
	<header class="home-header">
		<div class="zerogrid">
			<div class="logo"><div><img src="images/foodLogo.jpg" /></div></div>
			<div class="logo-title">智能点餐系统</div>
		</div>
	</header>
    <!--//////////////////////////////////////Menu-->
    <a href="#" class="nav-toggle">Toggle Navigation</a>
    <nav class="cmn-tile-nav">
		<ul class="clearfix">
			<li class="colour-1"><a href="index.jsp">首页</a></li>
			<li class="colour-2"><a href="gallery.jsp">下午茶</a></li>
			<li class="colour-3"><a href="staff.jsp">鲜果购</a></li>
			<li class="colour-4"><a href="reservation.jsp">精选小吃</a></li>
			<li class="colour-5"><a href="archive.jsp">超市</a></li>
			<li class="colour-6"><a href="news.jsp">精选介绍</a></li>
			<li class="colour-4"><a href="menu.jsp">购物车</a></li>
			<li class="colour-3"><a href="login.jsp">登录</a></li>
			<li class="colour-2"><a href="manager.jsp">用户管理</a></li>
			<li class="colour-1"><a href="order.jsp">查看订单</a></li>
		</ul>
    </nav>
	
<!--////////////////////////////////////Container-->
<section id="container" class="index-page" style="margin-top: 50px;">
	<div class="wrap-container zerogrid">
		<!-----------------content-box-1-------------------->
		<div class="crumbs">
			<ul>
				<li><a href="index.jsp">首页</a></li>
				<li><a href="archive.jsp">超市</a></li>
			</ul>
		</div>
		<!-----------------content-box-2-------------------->
		<section class="content-box box-2">
			<div class="zerogrid">
				<div class="row wrap-box"><!--Start Box-->
					<div class="header">
						<h2>超市</h2>
						<hr class="line" style="max-width: 80px;">
					</div>
					<div class="row">
						<div class="col-1-3">
							<div class="wrap-col">
								<div class="box-item">
									<span class="ribbon">星期八便利店<b></b></span>
									<img src="http://p1.meituan.net/xianfu/e1bcdafeb2a17c7db0115ab062109372112900.jpg" alt="">
									<p>星期八便利店<br>起送：¥29 配送费：¥3</p>
									
								</div>
							</div>
						</div>
						<div class="col-1-3">
							<div class="wrap-col">
								<div class="box-item">
									<span class="ribbon">万嘉便利<b></b></span>
									<img src="http://p0.meituan.net/xianfu/353a49c77bda6bba6b1c808614231f7620480.jpg" alt="">
									<p>万嘉便利<br>起送：¥20 配送费：¥5</p>
									
								</div>
							</div>
						</div>
						<div class="col-1-3">
							<div class="wrap-col">
								<div class="box-item">
									<span class="ribbon">100米连锁超市<b></b></span>
									<img src="http://p0.meituan.net/xianfu/85aa840d671ecbafbf4dcb88d1fc4eeb14336.jpg" alt="">
									<p>100米连锁超市<br>起送：¥35 免配送费</p>
									
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-1-3">
							<div class="wrap-col">
								<div class="box-item">
									<span class="ribbon">见福便利店<b></b></span>
									<img src="http://p1.meituan.net/xianfu/7317c3c2b4402647ab8475b46db00a3e68821.jpg" alt="">
									<p>见福便利店<br>起送：¥35 配送费：¥3</p>
									
								</div>
							</div>
						</div>
						<div class="col-1-3">
							<div class="wrap-col">
								<div class="box-item">
									<span class="ribbon">裕点酒业<b></b></span>
									<img src="http://p1.meituan.net/xianfu/5f82990050bde47d7826407b4756cbcc75776.jpg" alt="">
									<p>裕点酒业<br>起送：¥35 配送费：¥5</p>
									
								</div>
							</div>
						</div>
						<div class="col-1-3">
							<div class="wrap-col">
								<div class="box-item">
									<span class="ribbon">FocMart<b></b></span>
									<img src="http://p1.meituan.net/xianfu/2b928279854467973ca90a93aeab3be5172032.png" alt="">
									<p>FocMart<br>起送：¥20 配送费：¥4</p>
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</section>

<!--////////////////////////////////////Footer-->
<footer class="zerogrid">
	<div class="wrap-footer">
		<div class="row">
			
			<div class="col-1-3">
				<div class="wrap-col">
				</div>
			</div>
			<div class="col-1-3">
				<div class="wrap-col">
					<h4>联系客服</h4>
					<p>0594-1234567</p>
					<p>周一至周日 9:00-23:00</p>
					<p>客服不受理商务合作</p>
				</div>
			</div>
		</div>
	</div>
	<div class="copyright">
		<div class="wrapper">
			<a target="_blank" href="#"></a>
			<ul class="quick-link f-right">
			</ul>
		</div>
	</div>
</footer>


	<!-- js -->
	<script src="js/classie.js"></script>
	<script src="js/demo.js"></script>

	<script src="js/jquery-1.11.3.min.js"></script>
	<script src="js/responsiveslides.min.js"></script>
	<script>
	$(function () {
	  // Slideshow 4
	  $("#slider4").responsiveSlides({
		auto: true,
		pager: false,
		nav: false,
		speed: 500,
		namespace: "callbacks",
		before: function () {
		  $('.events').append("<li>before event fired.</li>");
		},
		after: function () {
		  $('.events').append("<li>after event fired.</li>");
		}
	  });
	  
	  $('.box-item').hover(function(){
	  	$(this).css('background', '#F7F7F7');
	  	$(this).css('cursor', 'pointer');
	  }, function() {
	  	$(this).css('background', '#FFF');
	  });
	  $('.box-item').click(function() {
	  	window.location.href = "shopDetail.jsp";
	  	var name = $(this).find('.ribbon').text();
	  	localStorage.shopName = name;
	  });
	});
	</script>
</div>
</body></html>